<template>
    <div class="template-edit">
        <button @click="checkItem()">Edit</button>

        <!-- 不可编辑对话框 -->
        <UxDialog :visible="dialog" @close="dialog = ''">
            <div class="dialog-edit">
                <template v-if="dialog == 'forbid'">
                    <img src="@/assets/images/template/dialog-edit.png" alt="">
                    <strong>This template has been applied to an order and cannot be edited. To change your design, please duplicate the template and edit the copy.</strong>
                    <button @click="copyItem()" type="primary">Duplicate template</button>
                </template>

                <UxLoading2 :loading="loading" />
            </div>
        </UxDialog>
    </div>

</template>
<script>
export default {
    props: {
        item: { type: Object, default: () => ({}) },
    },
    data () {
        return {
            loading: false,
            dialog: '',
        };
    },
    methods: {

        // 检查
        async checkItem () {
            this.loading = true;
            this.dialog = 'loading'

            let editable = await this.$http("storeTemplate.getEditable/" + this.item.id);
            if (editable.code === 0) {
                if (editable.data) {
                    // 重新设计，跳转过去
                    // this.loading = false;
                    this.$router.push({
                        path: "/designer",
                        query: { tid: this.item.id },
                    });
                } else {
                    this.loading = false;
                    this.dialog = 'forbid';
                }
                this.loading = false;
            } else {
                this.$uxMessage.error(editable.msg || "Failed to edit template");
                this.loading = false;
                this.dialog = '';
            }
        },

        // 复制一条
        async copyItem () {
            this.loading = true;
            let response = await this.$http("storeTemplate.postCopy", this.item.id);
            if (response.code === 0) {
                this.$uxMessage.success("Template duplicated successfully");
                this.loading = false;
                this.dialog = '';
                this.$emit('reload');
            } else {
                this.$uxMessage.error("Failed to duplicate template");
                this.loading = false;
                this.dialog = '';

            }
        },

    },
    created () {


    },
};
</script>
<style lang="scss" scoped>
.template-edit {
    & > button {
        border: none;
        background: none;
        margin: 0;
        width: 168px;
        height: 34px;
        box-sizing: border-box;
        padding: 0 8px;
        font-size: 14px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #555555;
        justify-content: flex-start;

        &:hover {
            background: #f6f6f6;
            color: #000;
        }
    }
}

.dialog-edit {
    width: 320px;
    height: 414px;
    box-sizing: border-box;
    padding: 72px 14px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    img {
        width: 80px;
        height: 80px;
    }

    strong {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: 16px;
        font-family: Roboto-Regular, Roboto;
        font-weight: 400;
        color: #000000;
        line-height: 22px;
    }
    button {
        margin-top: 70px;
        width: 100%;
    }

    .loading {
        border-radius: 8px;
    }
}
</style>
